<template>
  <div class="loop">
    <div class="A">
      <h1>环状图</h1>
      <div ref="chartRef" style="width: 360px; height: 350px"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { echarts } from '@/utils/echarts'
// 定义一个ref变量，用于存储div元素的引用
const obj = [
  {
    name: '华东',
    value: 111,
  },
  {
    name: '华南 ',
    value: 222,
  },
  {
    name: '华北',
    value: 333,
  },
  {
    name: '西部',
    value: 333,
  },
  {
    name: '其他',
    value: 333,
  },
]
const BB = obj.map((item) => {
  return {
    name: item.name,
    value: item.value,
  }
})
const chartRef = ref<HTMLDivElement | null>(null)
let myChart: echarts.ECharts | null = null
const option = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: '5%',
    left: 'center',
  },
  series: [
    {
      name: '555555',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: true,
      },
      data: BB,
    },
  ],
}

onMounted(() => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)
    myChart.setOption(option)
  }
})

// 在组件卸载前执行的操作
onBeforeUnmount(() => {
  // 如果echarts实例存在，则销毁实例
  if (myChart) {
    myChart.dispose()
    myChart = null // 清空 myChart 变量
  }
  chartRef.value = null // 清空 chartRef 变量 myChart.dispose()
})
</script>

<style scoped lang="scss"></style>
